<!--  -->
<template>
    <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh">
        <wp-null-data-area
            :null-data-msg="$st('wp_No_Order')"
            v-if=" (!tableData) || (tableData.length === 0)" />
        <van-list
            ref="list"
            v-model:loading="loading"
            :finished="finished"
            @load="onLoad"
            :immediate-check="false" >
            <maintaincheck-order-card
                v-for="(item, index) in tableData"
                :key="index"
                :orderItem="item"
            >
            </maintaincheck-order-card>
        </van-list>
    </van-pull-refresh>
</template>

<script>
import _ from 'lodash';
import { reactive, toRefs, watch } from 'vue';
import MaintaincheckOrderCard from '../maintaincheckorder/MaintaincheckOrderCard.vue';
import Cookies from 'js-cookie';
export default {
    name: '',
    components: {
        MaintaincheckOrderCard
    },
    props: {
        // 后台获取数据方法
        fnGetData: {
            type: Function,
            default () {
                return new Promise((resolve, reject) => {
                    try {
                        resolve([]);
                    } catch (error) {
                        reject(error);
                    }
                });
            }
        },
        filter: {
            type: Object,
            default () {
                return {
                    maintainworkorderid: '',
                    status: '',
                    administrator: '',
                    n: 20,
                    p: 1,
                    sendordertimestart: '',
                    sendordertimeend: '',
                    maintaintimestart: '',
                    maintaintimeend: '',
                    address: '',
                    customer_name: '',
                    contactperson: '',
                    maintainresultstatus: '',
                    username: Cookies.get('username')
                };
            }
        }

    },
    setup (props, context) {
        const state = reactive({

            pageIndex: 0,
            pageSize: 20,
            refreshing: false,
            loading: false,
            finished: false,
            filterData: {
                ...props.filter,
                username: Cookies.get('username'),
                p: 0,
                n: 20
            },
            totallist: 0,
            tableData: []
        });
        // 搜索方法 支持防抖
        const search = _.debounce(async () => {
            try {
                state.loading = true;
                state.pageIndex = state.pageIndex + 1;
                state.filterData.p = state.pageIndex;
                state.filterData.n = state.pageSize;
                const res = await props.fnGetData(state.filterData);
                if (res.result !== 'success') {
                    throw new Error(res.message);
                }
                state.tableData.push(...res.value);
                state.totallist = res.allnum;
            } catch (error) {
                state.finished = true;
            } finally {
                state.loading = false;
                if (state.filterData.p * state.filterData.n >= state.totallist) {
                    state.finished = true;
                }
            }
        }, 500);

        const onLoad = () => {
            search();
            console.log('state.tableData');
            console.log(state.tableData);
        };

        const onRefresh = async () => {
            state.pageIndex = 0;
            state.tableData = [];
            state.finished = false;
            await search();
            state.refreshing = false;
        };
        watch(() => props.filter, (newVal, oldVal) => {
            state.filterData = {
                ...newVal
            };
            onRefresh();
        });

        const refData = toRefs(state);
        return {
            search,
            onLoad,
            onRefresh,
            ...refData
        };
    },
    mounted () {
        this.onLoad();
    }
};
</script>
<style lang='scss' scoped>

</style>
